<template>
    <div class="bind-email-root" >
        <div class="top">
            <div class="title">个人信息</div>
            <div class="line"></div>
        </div>
        <div class="content" >
            <div class="verify box">
                <div :class="active==0?'active step':'step'"  style="margin-right: 30px" >输入邮箱 <img  v-bind:src="active==0?stepSelectIcon:stepIcon"> </div>
                <div :class="active==1?'active step':'step'" >验证邮箱 <img  v-bind:src="active==1?stepSelectIcon:stepIcon"></div>
                <div :class="active==2?'active step':'step'">完成</div>
            </div>
            <div class="email box" v-if="active==0">
                <label><span>*</span>邮箱：</label>
                <input type="text" v-model="email" placeholder="请输入邮箱"></input>
            </div>
            <div class="code box" v-if="active==0">
                <label>图形验证码：</label>
                <input type="text" v-model="imgCode"></input>
                <s-identify class="img-checked"  :contentHeight=35 :contentWidth=75 :identifyCode="identifyCode" style="margin-top: 3px"></s-identify>
<!--                <img src="@/assets/img/setting/code.png" />-->
                <a @click="refreshCode">看不清 换一张</a>
            </div>
            <div class="sended" v-if="active==1">
                <img src="@/assets/img/setting/guide.png">
                <p>我们已经发送了一封验证邮件至您的邮箱<a>{{email}}</a>请在24小时内完成验证</p>
            </div>
            <div class="finish" v-if="active==2">
                <img src="@/assets/img/setting/ok.png">
                <p>您的邮箱{{email}}<br>已验证完成</p>
            </div>
            <div class="next" :class="active==0?'step1':'step2'">
                <div class="btn"  @click="toNext()">{{nextMsg}}</div>
                <div class="retry" v-if="active==1">没收到邮件?<a @click="sendEmail"> 重发</a></div>
            </div>
        </div>
    </div>
</template>

<script>
  import SIdentify from '../register/picVerfication';
  import validate from '../../assets/utils/validate.js'
  export default {
    components:{
      SIdentify
    },
    name: 'BindEmail',
    data:function(){
      return {
        active:0,
        nextMsg:"下一步",
        stepSelectIcon:require('@/assets/img/setting/arrows_white.png'),
        stepIcon: require('@/assets/img/setting/arrows.png'),
        email:"",
        timer:{},
        imgCode:"",
        identifyCode: '',
        identifyCodes: '1234567890',
        sendState:true,
        cacheEmail:''
      }
    },
    mounted() {

    },
    created(){
      if(localStorage.getItem(localSaved.userInfo)!=null){
        console.log(JSON.parse(localStorage.getItem(localSaved.userInfo)));
        this.email =JSON.parse(localStorage.getItem(localSaved.userInfo)).company.email;
        this.cacheEmail = JSON.parse(localStorage.getItem(localSaved.userInfo)).company.email;
      }
      if(this.$route.query){
        this.email=this.$route.query.email
      }
      clearInterval(this.timer)
    },
    methods:{
      check() {
        if (this.identifyCode != this.imgCode) {
          _g.message('图片验证码不正确', 'warning')
          return false
        }
        if (!validate.isEmail(this.email) ) {
          _g.message('邮箱格式不正确', 'warning')
          return false
        }
        if(this.email === this.cacheEmail){
          _g.message('请修改要绑定的邮箱', 'warning')
          return false
        }
        return true;
      },
        toNext:function() {
        if(this.active==2){
          this.backPersonal();
        }else if(!this.check()){
           return false;
        }else{
          if(this.active==0){
            if(this.sendState){
              this.sendEmail();
            }else{
              this.nextMsg = "返回上一步";
              this.active = 1;
            }
          }else if(this.active==1){
            this.nextMsg = "下一步";
            this.active = 0;
          }
          console.log((this.active))
        }
      },
      refreshCode() {
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4)
      },
      alterEmail(email){
        console.log(email)
      },
      backPersonal(){
        this.alterEmail(this.email);
        setTimeout(() => {
          this.$router.push({ path: '/setting/personal' })
        },600)
      },
      sendEmail(){
        _g.apiPost('/company/alidateEmail.do', {
          email:this.email
        }).then(res => {
          console.log(res)
          _g.toMessage({
              status: res.status,
              msg: res.status == 0 ? '发送成功' : '发送失败'
          })
          if (res.status == 0) {
            this.sendState = false;
            this.active=1;
            this.nextMsg = "返回上一步";
            this.checkEmailValie();
          }
        })
      },
      checkEmailValie(){
        this.timer = setTimeout(()=>{
          _g.apiPost('/company/selectEmail.do',{}).then(res =>{
            console.log(res)
            if(res.status==0){
              if(this.email==res.data){
                this.active=2;
                this.nextMsg = "返回个人信息";
                let uinfo = JSON.parse(localStorage.getItem(localSaved.userInfo));
                uinfo.company.email = this.email;
                localStorage.setItem(localSaved.userInfo,JSON.stringify(uinfo));
              }else{
                this.checkEmailValie()
              }
            }else{
              this.checkEmailValie()
            }
          })
          console.log("============================")
        },3000)
      },
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min)
      },
      // 生成四位随机验证码
      makeCode(o, l) {
        for (let i = 0; i < l; i++) {
          this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
        }
        // console.log(this.identifyCode)
      },
    },  mounted() {
      // 验证码初始化
      this.identifyCode = '';
      this.makeCode(this.identifyCodes, 4);
    }
  }
</script>

<style scoped>
    .step1{
        margin-left: 215px
    }
    .step2{
        margin-left: 238px
    }
    .bind-email-root{
        width: 980px;
        height:847px;
        background: #FFFFFF;
    }
    .bind-email-root .top{
        height: 50px;
        min-width: 980px;
        border: 2px solid white;
    }
    .bind-email-root .top .title{
        margin-top: 12px;
        margin-left: 50px;
        margin-bottom: 9px;
        width:77px;
        height:26px;
        font-size:19px;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:26px;
    }
    .bind-email-root .top .line{
        width:50px;
        height:3px;
        margin-left: 64px;
        background:rgba(255,115,0,1);
    }
    .bind-email-root .content input::-webkit-input-placeholder{
        color: rgba(204, 204, 204, 1);
    }
    .bind-email-root .content input{
        padding-left: 10px;
    }
    .bind-email-root .content .box{
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
    }
    .bind-email-root .content .box label span{
        color: #FF7300;
    }
    .bind-email-root .content .box label{
        margin-left: 110px;
        display: inline-block;
        text-align: right;
        font-size:14px;
        width: 95px;
        height: 32px;
        line-height: 32px;
        /*border: 2px solid red;*/
        margin-right: 10px;
        font-weight:400;
        color:rgba(102,102,102,1);
    }
    .bind-email-root .content .verify{
        margin-left: 220px;
        margin-top: 56px;
        color:#999999;
    }
    .bind-email-root .content .verify img{
        margin-left: 12px;
        width: 14px;
        height: 12px;
    }
    .bind-email-root .content .step{
        width: 130px;
        height: 32px;
        /*border: 2px solid red;*/
        text-align: center;
        line-height: 32px;
    }
    .bind-email-root .content .retry{
        font-size: 14px;
    }
    .bind-email-root .content .retry a{
        margin-left: 6px;
    }
    .bind-email-root .content .active{
        border-radius: 20px;
        color: white;
        background-color:#4D8DFA ;
    }
    .bind-email-root .content .email{
        margin-top: 53px;
    }
    .bind-email-root .content .email input{
        width:252px;
        height:32px;
        border-radius:3px;
        border:1px solid rgba(204,204,204,1);
    }
    .bind-email-root .content .code input{
        width:172px;
        height:33px;
        margin-right: 5px;
        border-radius:3px;
        border:1px solid rgba(204,204,204,1);
    }
    .bind-email-root .content .code{
        margin-top: 20px;
    }
    .bind-email-root .content .sended,.bind-email-root .content .finish {
        display: flex;
        flex-direction: row;
        justify-content: start;
        margin-top: 55px;
        margin-left: 175px;
        height: 63px;
    }
    .bind-email-root .content .sended img,.bind-email-root .content .finish img{
        margin: 15px;
        width: 35px;
        height: 34px;
    }
    .bind-email-root .content .sended p,.bind-email-root .content .finish p{
        line-height: 24px;
        margin-top: 6px;
        font-size:16px;
        width: 460px;
        /*border: 1px solid blue;*/
        font-weight:500;
        color:#666666;
    }
    .bind-email-root .content .sended a{
        margin-left: 9px;
    }
    .bind-email-root .content a{
        color:rgba(75,139,249,1);
    }
    .bind-email-root .content .code a{
        margin-left: 6px;
        margin-top: 1px;
        width:42px;
        min-height:28px;
        font-size:10px;
        /*border: 2px solid red;*/
        transform: scale(0.9);
        font-weight:400;
    }
    .bind-email-root .content .code img{
        width:60px;
        height:25px;
        margin-top: 4px;
        margin-left: 5px;
    }
    .bind-email-root .content .next{
        display: flex;
        flex-direction: column;
        justify-content: start;
        /*border: 2px solid yellow;*/
        margin-top: 43px;
        /*margin-left: 242px;*/
    }
    .bind-email-root .content .next>.btn{
        width:125px;
        height:40px;
        line-height: 40px;
        color: white;
        text-align: center;
        background:linear-gradient(56deg,rgba(255,115,0,1) 0%,rgba(255,177,38,1) 100%);
        box-shadow:0px 3px 10px 0px rgba(248,157,82,0.71);
        border-radius:4px;
        margin-bottom: 15px;
        position: static !important;
    }

</style>